<style>
.custom-indicator {
    position: absolute;
    right: 0;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 4px 0 0 4px;
    padding: 2px 8px;
}
.swipe-item img {
    width: 100%;
}
.goods-detail img {
    max-width: 100% !important;
}
.goods-badge .van-badge--fixed {
    right: 10px;
    top: 10px;
}
.go-back {
    position: fixed !important;
    left: 10px;
    top: 10px;
    z-index: 999;
    height: 36px !important;
    width: 36px;
    font-size: 22px !important;
    padding: 10px 0 !important;
    line-height: 36px !important;
}
.go-back .van-button__text {
    line-height: 36px !important;
}
</style>
<template>
    <div class="detail" v-if="goodsDetail">
        <van-button class="go-back" round @click="$router.back()">
            <van-icon name="arrow-left" />
        </van-button>
        <van-swipe @change="onSwipeChange">
            <van-swipe-item
                class="swipe-item"
                v-for="(src, index) in goodsDetail.images"
                :key="index"
            >
                <img :src="src" alt="" />
            </van-swipe-item>
            <template #indicator>
                <div class="custom-indicator">
                    {{ swipeIndex + 1 }}/{{ totalImage }}
                </div>
            </template>
        </van-swipe>
        <div class="goods-sell-info clear-float">
            <div class="float-left">
                ￥<span>{{ goodsDetail.price }}</span>
            </div>
            <div class="float-right">
                已销售 {{ goodsDetail.sell_count }} 件
            </div>
        </div>
        <div class="goods-title">
            <h4>{{ goodsDetail.title }}</h4>
        </div>
        <div class="goods-detail" v-html="goodsDetail.detail"></div>
        <van-goods-action>
            <van-goods-action-icon
                icon="chat-o"
                text="客服"
            />
            <van-badge :content="5" class="goods-badge van-goods-action-icon">
                <van-goods-action-icon
                    icon="cart-o"
                    text="购物车"
                    @click="$router.push('/cart')"
                />
            </van-badge>
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button
                @click="addToCart"
                type="warning"
                text="加入购物车"
            />
            <van-goods-action-button
                type="danger"
                text="立即购买"
                @click="buy"
            />
        </van-goods-action>
    </div>
</template>
<script>
// 引用Dialog组件
import { Dialog,Toast } from "vant";
import api from "../components/api"; // 引用api
export default {
    name: "GoodsDetail",
    data() {
        return {
            totalImage: 0,
            swipeIndex: 0,
            goodsDetail: {},
            id: null,
            uid:0,
        };
    },
    mounted() {
        // 相当于从 ?id=1&name=xx 从获取id的值
        const id = (this.id = this.$route.query.id);
        // 判断参数
        if (!id || id < 1 || isNaN(id)) {
            Dialog.alert({
                title: "提示",
                message: "参数不正确",
            }).then(() => {
                // 返回上一页
                this.$router.back();
            });
            return;
        }
        this.loadGoodsInfo(); // 加载商品详情
    },
    methods: {
        checkLogin() {
            // 判断是否已经登录
            if (!sessionStorage.getItem("userinfo")) {
                // 没有登录信息 直接跳转到登录
                this.$router.replace("/login");
                return false;
            } else {
                // 已经登录 则获取用户信息
                const userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
                this.uid = userinfo.id; // 取得用户id并存储
                return true;
            }
        },
        buy() {

            // 要传入的商品参数
            const gs = [{ id: this.id, count: 1 }];
            this.$router.push(
                "/submit-order?from=detail&goods=" + JSON.stringify(gs)
            );
        },
        addToCart() {
            if(this.checkLogin() == false){
                return;
            }
            api.get(
                "/carts/update?uid=" + this.uid + "&gid=" + this.id + "&act=add"
            )
                .then((ret) => {
                    Toast('加入购物车成功')
                })
                .catch((err) => console.log(err));
        },
        loadGoodsInfo() {
            api.get("/goods/info?id=" + this.id)
                .then((ret) => {
                    if (ret.code == 0) {
                        this.goodsDetail = ret.data;
                        this.totalImage = ret.data.images.length;
                    } else {
                        Dialog.alert({
                            title: "提示",
                            message: ret.message,
                        }).then(() => {
                            // 返回上一页
                            this.$router.back();
                        });
                    }
                })
                .catch();
        },
        onSwipeChange(index) {
            this.swipeIndex = index;
        },
    },
};
</script>
